<template>
  <div>
    <!-- 返回头部 -->
    <el-backtop></el-backtop>
    <el-container style="height:100%;" class="ts ts-yellow">
      <!-- 头部-nav -->
      <el-header class="nav-Header">
        <LayoutTop></LayoutTop>
      </el-header>
      <!-- 侧边 -->
      <el-container class="hideOver">
        <div :class="SildCls" style="width:220px;">

          <div class="test">
            <el-aside class="nav-Aside" width="220px" ref="sild">
              <LayoutSild class="LayoutSild"></LayoutSild>
            </el-aside>
          </div>
        </div>
        <el-container>
          <!-- 内容 -->
          <el-main class="nav-Main">
            <!-- 面包屑-->
            <div>
              <Breadcrumb></Breadcrumb>
            </div>
            <div class="Main_Div">
              <slot></slot>
            </div>
            <!-- 底部 -->
            <div class="Foot" hidden>
              <el-footer style="height:40px;margin-top:40px;">
                <LayoutFooter></LayoutFooter>
              </el-footer>
            </div>
          </el-main>
        </el-container>
      </el-container>

    </el-container>
  </div>
</template>

<style lang="scss" scoped>
//隐藏滚动条
.hideOver {
  overflow-x: hidden;
  overflow-y: hidden;
}
.test {
  width: 220px;
  //overflow: hidden;
}
.nav-Aside {
  //position: fixed;
  // top: 0;
  // bottom: 0;
  // left: 0;
  // overflow-y: auto;
  // &::-webkit-scrollbar {
  //   display: none;
  // }
  //overflow-y: scroll;
  //width: 220px;
  //height: 900px;
  //overflow: hidden !important;
  //height: 300px;
  //overflow: auto;
  //position: absolute;
  //overflow: hidden;
  //width: 200px;
  overflow: hidden;
  position: fixed;
  top: 0;
  //width: 235px;
  bottom: 0;
  left: 0;
  height: 100%;
  .LayoutSild {
    //overflow: auto;
    width: 235px;
    height: 100%;
    margin-right: -50px; /* maximum width of scrollbar */
    padding-right: 50px; /* maximum width of scrollbar */
    overflow-y: scroll;
    // &::-webkit-scrollbar {
    //   display: none;
    // }

    // height: 900px;
    // width: 240px;
    // overflow-x: hidden;
    // overflow-y: scroll;
    //overflow: auto;

    //position: fixed;
  }
}
//头部nav 公共样式
.nav-Header {
  position: fixed;
  width: 100%;
  height: 60px;
  line-height: 57px;
  padding: 0px;
  background: #605ca8;
  opacity: 0.98;
  color: white;
  z-index: 9;
}
.nav-Main {
  padding: 70px 10px;
  height: 100%;
  //height: 900px;
  background: #eef2f6;
  overflow-x: hidden;
  //主体内容区域样式
  .Main_Div {
    //overflow: auto;
    padding: 10px;
    border-radius: 5px;
    //height: 100%;
    background: white;
    &:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
}
.Foot {
  //bottom: 10px;
  text-align: left;
  //padding: 10px;
  //background: red;
  //margin-top: 200px;
}
.SildHidd {
  transition: all 0.5s;
  width: 60px !important;
}
.SildShow {
  transition: all 0.4s;
  width: 220px !important;
}
</style>
<script>
/*
  作者：乐涛
  修改日期：2020/7/30
  注明：头部、中部、尾部模块引入
  勿动警告！后果自负
*/
import LayoutSild from '@/components/WebUI/LayoutSild'
import LayoutTop from '@/components/WebUI/LayoutTop'
import LayoutFooter from '@/components/WebUI/LayoutFooter'
import Breadcrumb from '@/components/WebUI/Breadcrumb'
export default {
  components: {
    LayoutSild,
    LayoutTop,
    LayoutFooter,
    Breadcrumb
  },
  data () {
    return {
      SildCls: ''
    }
  },
  watch: {
    '$store.state.IsCollapse' (n) {
      //alert(n)
      if (n) {
        this.SildCls = "SildHidd";
      } else {
        this.SildCls = "SildShow";
      }

    }
  }
}
</script>